<template>
	<el-col :span="24" class="menu-top">
		<el-col :span="24" class="w1400">
			<div class="logo">
				<img :src="$store.state.logo.url" alt="">
			</div>
			<el-col :span="17" class="nav">
				<ul>
					<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true"
					 v-if="$store.state.maxRole == `tr`">
						<el-menu-item index="/bkzx">互动课堂</el-menu-item>
						<el-menu-item index="/zbk" v-if="zbStatus == `bjy`">直播课堂</el-menu-item>
						<el-menu-item index="/ysZbk" v-if="zbStatus == `ys`">直播课堂</el-menu-item>
						<el-menu-item index="/zy">资源中心</el-menu-item>
					</el-menu>
					<el-menu :default-active="activeIndex" class="el-menu-demo me" mode="horizontal" @select="handleSelect" :router="true"
					 v-if="$store.state.maxRole == `sadmin` || $store.state.maxRole == `headmaster` || $store.state.maxRole == `eduadmin`">
						<el-menu-item index="/jsgl">教室管理</el-menu-item>
						<el-menu-item index="/jxxs">教学巡视</el-menu-item>
						<!-- <el-menu-item index="/tkpk">听课评课</el-menu-item> -->
						<el-menu-item index="/jxcp">教学测评</el-menu-item>
						<el-menu-item index="/zyzx">资源中心</el-menu-item>
						<el-menu-item index="/tjfx">统计分析</el-menu-item>
						<!-- <el-menu-item @click.native="goSys">智能物联</el-menu-item> -->
                        <el-menu-item index="/znwl">智能物联</el-menu-item>
                        <el-menu-item index="/znfb">智能发布</el-menu-item>
					</el-menu>
					<!-- <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true">
						<el-menu-item index="/bkzx/list/hdk">互动课堂</el-menu-item>
						<el-menu-item index="/bkzx/list/zbk">线上直播</el-menu-item>
						<el-menu-item index="/zyzx">资源中心</el-menu-item>
						<el-submenu index="/glzx" @click.native="goGlzx">
							<template slot="title">管理中心</template>
							<el-menu-item index="/jxcp">
								<el-submenu index="2-4">
									<template slot="title">教学测评</template>
									<el-menu-item index="/jxcp/cpgl">测评管理</el-menu-item>
									<el-menu-item index="/jxcp/mbgl">模板管理</el-menu-item>
									<el-menu-item index="/wdcp">我的测评</el-menu-item>
								</el-submenu>
							</el-menu-item>
							<el-menu-item index="/tkpk">听课评课</el-menu-item>
							<el-menu-item index="/tjfx">
								<el-submenu index="2-5">
									<template slot="title">统计分析</template>
									<el-menu-item index="/tjfx/qdtj">签到统计</el-menu-item>
									<el-menu-item index="/tjfx/hdtj">互动统计</el-menu-item>
									<el-menu-item index="/tjfx/cptj">测评统计</el-menu-item>
									<el-menu-item index="/tjfx/tktj">听课统计</el-menu-item>
								</el-submenu>
							</el-menu-item>
							<el-menu-item index="/jxxs">教学巡视</el-menu-item>
							<el-menu-item index="/user">教师管理</el-menu-item>
						</el-submenu>
					</el-menu> -->
					<div class="line"></div>
				</ul>
			</el-col>
			<el-col :span="3" class="info" v-if="isLogin == true">
				<el-badge :value="unReadNum" class="item"><i class="el-icon-bell" @click="goMsg()"></i></el-badge>
				<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" router>
					<el-submenu index="2">
						<template slot="title">
							<el-avatar :size="40" :src="user.icon" @click.native="goPerson"></el-avatar>
						</template>
						<el-menu-item v-if="maxrole=='tr'" index="/mm">个人中心</el-menu-item>
						<el-menu-item v-if="maxrole=='sadmin'" index="/mm">个人中心</el-menu-item>
						<el-menu-item @click.native="logout">退出</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-col>
		</el-col>

	</el-col>
</template>

<script>
	export default {
		data() {
			return {
				maxrole: this.$store.state.maxRole,
				isLogin: false,
				user: this.$store.state.user,
                zbStatus:this.$store.state.liveType,
				headerList: [{
					name: 'bkzx',
					title: '备课',
					path: "/bkzx",
					href: "/bkzx"
				}, {
					name: 'kczx',
					title: '我的课程',
					path: "/kczx",
					href: "/kczx"
				}, {
					name: 'zyzx',
					title: '校内资源',
					path: "/zyzx",
					href: "/zyzx"
				}, {
					name: 'kczx',
					title: '管理中心',
					path: "/kczx",
					href: "/kczx"
				}],
				unReadNum: 0,
				activeIndex: '/'
			}
		},
		watch: {
			'$route'() {
				this.handleSelect(this.activeIndex)
			}
		},
		mounted() {
			this.activeIndex = this.$route.matched[0].path || '/';
			this.islogin();
			this.getUnReadNum();
			// this.getMenus();
		},
		methods: {
			//消息--
			reduce() {
				this.unReadNum--
			},
			getUnReadNum() {
				this.$axios.postRequest('/msg/getMsgNum', {
					userid: this.user.id
				}).then(res => {
					this.unReadNum = res.data;
				})
			},
			islogin() {
				if (this.user.userCode != undefined) {
					this.isLogin = true;
				} else {
					this.isLogin = false;
				}
			},
			getMenus() {
				this.$axios.postRequest('/ccms/getMenus').then(res => {
					// //console.log(res)
				})
			},
			goMsg() {
				this.$router.push({
					name: 'xxlb'
				})
			},
			//退出系统
			closeSystem(event) {
				event.currentTarget.blur(); //点击后失去一下焦点，为了解决当点击取消时退出系统提示文字又显示的问题
				this.$confirm('是否确认注销登录', '', {
					type: 'warning'
				}).then(() => {
					this.$store.commit("setUser", {});
					this.$router.push({
						'name': 'login',
						'query': {
							'redirect': this.$route.fullPath
						}
					});
				}).catch(() => {
				})
			},
			logout() {
				localStorage.removeItem('token');
				this.$message({
					message: '您已退出登录',
					type: 'success'
				});
				console.log(this.$store.state.logintype)
				if(this.$store.state.logintype=='sy'){
					this.$router.push({
						'name': 'sy',
						'query': {
							'redirect': this.$route.fullPath
						}
					});
				}else if(this.$store.state.logintype=='login'){
					this.$router.push({
						'name': 'login',
						'query': {
							'redirect': this.$route.fullPath
						}
					});
				}
			},
			handleSelect(index) {
				this.activeIndex = index
			},
			goLogin() {
				this.$router.push({
					name: 'login'
				})
			},
			goPerson() {
				this.$router.push({
					name: 'mm'
				})
			},
			goSys(){
				window.open('http://221.14.6.29:8085/')
			},
			//管理中心
			goGlzx() {
				this.$router.push({
					name: 'glzx'
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	$topRgba: rgb(0, 180, 255);

	.w1400 {
		display: flex;
		justify-content: space-between;
		width: 80%;
		min-width: 1205px;
		margin: 0 auto;
	}

	.active {
		color: #5f6573;
		border-bottom: 2px solid #2e323e;
	}

	.main {
		width: 100%;
		height: 100%;
	}

	.menu-top {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 80px;
		background-color: #fff;
		box-shadow: 0px 0px 24px 0px rgba(52, 103, 234, 0.11);


		.logo {
			// padding: 10px;
			box-sizing: border-box;
			padding: 10px 20px;
			max-width: 455px;
			height: 80px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.nav {
			height: 100%;
			display: flex;

			li {
				float: left;
				height: 80px;
				line-height: 80px;
				font-size: 18px;

				a {
					font-size: 17px;
					color: #5f6573;
					display: block;
					// padding: 0 30px;
				}
			}

			&>>>.el-icon-arrow-down {
				color: #fff;
			}
		}
	}

	.content {
		height: calc(100% - 60px);
	}

	.info {
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.el-icon-bell {
			font-size: 26px;
		}

		&>>>.el-submenu__title {
			padding: 0;
		}

		&>>>.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
			border: none;

		}

		&>>>.el-menu.el-menu--horizontal {
			border: none;
		}

		&>>>.el-submenu__icon-arrow {
			color: #fff;
			display: none;
		}

		&>>>.el-badge {
			margin-right: 50px;
			cursor: pointer;
		}
	}

	.item>>>.el-badge__content {
		background-color: #ff0000;
	}

	// @media screen and (max-width: 1334px) {
	//     .nav li a {
	//         padding: 0 15px !important;
	//     }
	// }
	.me>>>.el-menu-item{
		padding: 0 10px;
	}
</style>
